<script setup lang="ts">
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, watch } from 'vue'
import { ref } from 'vue'
import { usePlanStore } from '@/stores/plan'
import { formatDate } from '@/utils'
import type { NutritionRecordI } from '@/types/record'
import { getNutritionRecordUtil } from '@/AGC/utils/record'

const store = usePlanStore()
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
])
const emits = defineEmits(['goCollect'])
const chartRef = ref()
let chart: echarts.ECharts | null = null
// 初始化图表
const initEcharts = () => {
  chart = echarts.init(chartRef.value)
  const option = {
    title: {
      text: `${formatDate(store.date)} 饮食营养成分(g)`,
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    grid: {
      left: '3%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      bottom: 10,
      left: 'center',
      data: ['蛋白质', '脂肪', '碳水化合物'],
    },
  }

  chart.setOption(option)
}
// 更新图表
const updateEcharts = () => {
  const option = {
    series: [
      {
        name: '营养成分',
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          {
            value: nutritionRecord.value.protein,
            name: '蛋白质',
          },
          {
            value: nutritionRecord.value.fat,
            name: '脂肪',
          },
          {
            value: nutritionRecord.value.carbohydrate,
            name: '碳水化合物',
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }

  chart?.setOption(option)
}
// 营养成分记录
const nutritionRecord = ref<NutritionRecordI>({
  protein: 0,
  fat: 0,
  carbohydrate: 0,
})
// 获取营养成分记录
const getNutritionRecord = async () => {
  nutritionRecord.value = await getNutritionRecordUtil(store.date)

  if (nutritionRecord.value.protein == 0) {
    chart?.clear()
    initEcharts()
  } else {
    initEcharts()
    updateEcharts()
  }
}
// 监听日期变化
watch(
  () => store.date,
  async () => {
    await getNutritionRecord()
  },
)
// 组件挂载后
onMounted(async () => {
  setTimeout(async () => {
    initEcharts()
    await getNutritionRecord()

    if (nutritionRecord.value.protein != 0) {
      updateEcharts()
    }
  }, 100)
})
</script>

<template>
  <el-card style="width: 48%; position: relative">
    <div v-show="nutritionRecord.protein == 0" class="gradient-text">
      <div class="keyword">📢小康途</div>
      没有收集到您
      <div class="keyword">{{ formatDate(store.date) }}</div>
      的饮食数据哦~
      <div class="link" @click="emits('goCollect')">去收集</div>
    </div>
    <div ref="chartRef" style="width: 100%; height: 400px"></div>
  </el-card>
</template>

<style scoped lang="less">
// 渐变改善版
.gradient-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  color: black;
  font-size: 40px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive, sans-serif;

  .keyword {
    color: rgb(5, 88, 229); /* 高亮颜色 */
    font-weight: bold; /* 加粗 */
  }

  .link {
    text-decoration: underline; /* 下划线 */
    cursor: pointer; /* 鼠标指针 */
  }

  .link:hover {
    color: rgb(5, 88, 229); /* 鼠标悬停时的颜色 */
  }
}
</style>
